<template>
    <el-drawer
        v-model="isShow"
        :title="title"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <Bailiffs v-model:uses="policeUserList"/>
        <!-- {{ userdata }} -->
        <template #footer>
            
            <el-button type="primary" @click="submitHandle">提交</el-button>
            <!-- 取消 -->
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import Bailiffs from "@/components/PoliceUserTable/Bailiffs.vue";
import {ElMessage} from "element-plus";

const emit = defineEmits(['user', 'userKey']);
const {isClearData} = defineProps(['isClearData']);

const isShow = ref(false)
const title = ref('')

const userdata = ref('')


// 法警人员列表
const policeUserList = ref({})

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
}

const showSelect = async (name, user = {}) => {
    changeShowStatus()
    title.value = name
    if (user) {
        policeUserList.value = user.value;
    }
}
defineExpose({showSelect})

// 监听 isClearData 的数据状态
// watch(() => isClearData, (status) => {
//     if (status) {
//         policeUserList.value = {}
//     }
// })

const submitHandle = () => {
    // 如果法警人员数量只能要有一位，否则禁止提交
    if (policeUserList.value.length > 1) {
        ElMessage.error('值班负责人当前只支持选择一位。')
        return '';
    }
    userdata.value = policeUserList.value
    emit('user', policeUserList.value);
    changeShowStatus()
    // emit('userKey', policeUserList.value.map(item => item.userId))
}
</script>

<style scoped lang="scss">

</style>